A pseudo-element in CSS allows you to style specific parts of an element without needing to add extra HTML markup. Common pseudo-elements include ::before, ::after, ::first-letter, and ::first-line.

Key Points

1
Pseudo-elements let you style subparts of elements or insert content dynamically.
2
They are indicated by a double colon :: to distinguish them from pseudo-classes.
3
They do not exist in the DOM; they are virtual elements created for styling purposes.
4
Common use cases include decorative content, highlighting the first letter, or adding icons before/after text.

Example: Using ::before and ::first-letter

In this example, ::first-letter enlarges and colors the first letter, while ::before inserts a star before the paragraph text without modifying the HTML.

Best Practices

1
Use pseudo-elements to add stylistic content without cluttering HTML.
2
Combine with CSS properties like content, color, font-size, and background.
3
Avoid using them for interactive elements that require JavaScript functionality.
4
Test across browsers to ensure consistent rendering.

Difficulty: 3/10

Topics: pseudo-element syntax, styling before/after content, layout implications

Scenario Questions

0-2 years experience

1
How would you add a star icon before every review rating using CSS without changing the HTML?
2
What happens if you try to apply a border to a ::before element without setting content: ''?
3
You’re trying to style a tooltip with ::after, but it’s not showing up—what are the first three things you’d check?

2-5 years experience

1
A designer wants a speech bubble tooltip using ::before and ::after, but it’s breaking on mobile—how would you debug and fix it?
2
Your team’s CSS library uses ::before for icons, but now accessibility audits say screen readers are reading the content—what’s the issue and how do you resolve it?
3
A button’s ::after hover effect works in Chrome but not Safari—what could be causing this, and how would you investigate?

5-8 years experience

1
You’re building a scalable component library with pseudo-elements for decorative elements—how do you balance performance, maintainability, and accessibility across 50+ components?
2
A legacy UI uses ::before for visual separators, but now we’re migrating to a CSS-in-JS system—what are the tradeoffs of keeping pseudo-elements vs. switching to divs or SVGs?
3
How would you design a responsive navigation indicator using pseudo-elements that works across browsers, supports dark mode, and doesn’t impact layout shift during hydration?

8+ years experience

1
Your company’s design system relies heavily on pseudo-elements for UI embellishments—how would you architect a migration plan to reduce CSS complexity and improve render performance at scale?
2
Pseudo-elements are used across 20+ product teams for icons and indicators, but inconsistent usage is causing accessibility and testing issues—how do you enforce standards without stifling autonomy?
3
We’re considering removing all ::before/::after usage in favor of SVGs for better SSR and CDN caching—what are the long-term maintenance, performance, and developer experience tradeoffs you’d present to leadership?

Follow-up Questions

❓What happens if you forget the content property on a ::before element?
❓Can you style a pseudo-element with JavaScript directly?
❓Why might a ::after element not appear even when the CSS looks correct?